<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>coupledatepicker demo </title>
<link type="text/css" rel="stylesheet"  href="../highlight/shCore.css"/>
<link type="text/css" rel="stylesheet" href="../style/avalon.doc.css"/>
<script src="../highlight/shCore.js"></script>
<script src="../avalon.js"></script>
</head>
<body>
    <div class="wrapper">
        <h1>coupledatepicker demo</h1>
        <div class="demo-show" ms-controller="demo">
            <fieldset style="position: relative; z-index: 5">
                <legend>双日历框 两天最小相隔0天</legend>
                <div ms-widget="coupledatepicker" data-coupledatepicker-duplex="fromA, toA" data-coupledatepicker-rules="aOpts"></div>
                <p>通过配置rules来设置起始日历和结束日历之间两天相隔的最小天数。初始日期设为2014-06-12，最小相隔日期0天，则结束日期的最小日期为2014-06-12，虽然结束日期初始设置为2014-06-02，但是组件会自动修正结束日期</p>
            </fieldset>
            <fieldset style="position: relative; z-index: 4">
                <legend>双日历框 两天最大相隔8天</legend>
                <div ms-widget="coupledatepicker" data-coupledatepicker-duplex="fromB, toB" data-coupledatepicker-rules="bOpts"></div>
                <p>通过配置rules来设置起始日历和结束日历之间两天相隔的最小天数为0，最大天数为8</p>
            </fieldset>
            <fieldset style="position: relative; z-index: 3">
                <legend>双日历框 两天最小相隔0天，最大相隔8天</legend>
                <div ms-widget="coupledatepicker" data-coupledatepicker-duplex="fromC, toC" data-coupledatepicker-rules="dOpts"></div>
                <p>初始结束日期的初始日期为2014-06-20，在最小间隔天数和最大间隔天数所包含的日期，正常显示</p>
            </fieldset>
            <fieldset style="position: relative; z-index: 2">
                <legend>双日历框 最小日期、最大日期</legend>
                <div ms-widget="coupledatepicker" data-coupledatepicker-duplex="fromD, toD" data-coupledatepicker-rules="cOpts"></div>
                <p>通过配置rules对象，设置初始日期的最小日期fromMinDate、最大日期fromMaxDate和结束日期的最小日期toMinDate和最大日期toMaxDate,在显式设置结束日历的最小日期和最大日期的情况下，当结束日期不在其最小和最大日期范围之内时，组件会将结束日期设为其最小日期</p>
            </fieldset>
           
            <fieldset style="position: relative; z-index: 1">
                <legend>双日历框 结束初始日期异常时，rules defaultDate的设置</legend>
                <div ms-widget="coupledatepicker" data-coupledatepicker-duplex="fromE, toE" data-coupledatepicker-rules="eOpts"></div>
                from: {{fromE}}
                to2: {{toE}}
                <p>通过配置结束日期初始值异常时的默认值、最小间隔天数、最大间隔天数对应的rules属性，可以使结束日期初始为起始初始日期+2</p>
            </fieldset> 
            <script> 
                require(["datepicker/avalon.coupledatepicker"], function(avalon) {
                    var model = avalon.define("demo", function(vm) {
                        vm.fromA = "2014-06-12"
                        vm.toA = "2014-06-02"
                        vm.fromB = "2014-06-12"
                        vm.toB = "2014-06-02"

                        vm.fromC = "2014-06-12"
                        vm.toC = "2014-06-15"
                        vm.fromD = "2014-06-12"
                        vm.toD = "2014-06-02"
                        vm.fromE = "2014-06-12"
                        vm.toE = "2014-06-dd"
                        vm.aOpts = {
                            rules: 'null, 0D'
                        };
                        vm.bOpts = {
                            rules: 'null, 0D, 8D' //逗号分隔的字符分别表示结束初始日期异常时默认显示的日期、起始日期和结束日期之间相隔的最小天数、最大天数
                        }
                        vm.cOpts = {
                            rules: 'null, 0D, 8D',
                            fromMinDate: '2014-05-02',
                            fromMaxDate: '2014-06-28',
                            toMinDate: '2014-06-01',
                            toMaxDate: '2014-07-12'
                        }
                        vm.dOpts = {
                            rules: 'null, 0D, 8D' 
                        }
                        vm.eOpts = {
                            rules: '2D, 0D, 8D' 
                        }
                    })
                    avalon.scan();
                })
            </script>
        </div>
        <div ms-skip>
            <pre class="brush: js; html-script: true; gutter: false; toolbar: false">
                &lt;!DOCTYPE HTML&gt;
                &lt;html&gt;
                &lt;head&gt;
                    &lt;meta charset='utf-8'/&gt;
                    &lt;title&gt;coupledatepicker demo&lt;/title&gt;
                    &lt;script src='avalon.js'&gt;&lt;/script&gt;
                &lt;/head&gt;
                &lt;body&gt;
                    &lt;div class="demo-show" ms-controller="demo"&gt;
                        &lt;fieldset style="position: relative; z-index: 5"&gt;
                            &lt;legend&gt;双日历框 两天最小相隔0天&lt;/legend&gt;
                            &lt;div ms-widget="coupledatepicker" data-coupledatepicker-duplex="from, to" data-coupledatepicker-rules="aOpts"&gt;&lt;/div&gt;
                            &lt;p&gt;通过配置rules来设置起始日历和结束日历之间两天相隔的最小天数。初始日期设为2014-06-12，最小相隔日期0天，则结束日期的最小日期为2014-06-12，虽然结束日期初始设置为2014-06-02，但是组件会自动修正结束日期&lt;/p&gt;
                        &lt;/fieldset&gt;
                        &lt;fieldset style="position: relative; z-index: 4"&gt;
                            &lt;legend&gt;双日历框 两天最大相隔8天&lt;/legend&gt;
                            &lt;div ms-widget="coupledatepicker" data-coupledatepicker-duplex="from, to" data-coupledatepicker-rules="bOpts"&gt;&lt;/div&gt;
                            &lt;p&gt;通过配置rules来设置起始日历和结束日历之间两天相隔的最小天数为0，最大天数为8&lt;/p&gt;
                        &lt;/fieldset&gt;
                        &lt;fieldset style="position: relative; z-index: 3"&gt;
                            &lt;legend&gt;双日历框 两天最小相隔0天，最大相隔8天&lt;/legend&gt;
                            &lt;div ms-widget="coupledatepicker" data-coupledatepicker-duplex="from, to1" data-coupledatepicker-rules="dOpts"&gt;&lt;/div&gt;
                            &lt;p&gt;初始结束日期的初始日期为2014-06-20，在最小间隔天数和最大间隔天数所包含的日期，正常显示&lt;/p&gt;
                        &lt;/fieldset&gt;
                        &lt;fieldset style="position: relative; z-index: 2"&gt;
                            &lt;legend&gt;双日历框 最小日期、最大日期&lt;/legend&gt;
                            &lt;div ms-widget="coupledatepicker" data-coupledatepicker-duplex="from, to" data-coupledatepicker-rules="cOpts"&gt;&lt;/div&gt;
                            &lt;p&gt;通过配置rules对象，设置初始日期的最小日期fromMinDate、最大日期fromMaxDate和结束日期的最小日期toMinDate和最大日期toMaxDate,在显式设置结束日历的最小日期和最大日期的情况下，当结束日期不在其最小和最大日期范围之内时，组件会将结束日期设为其最小日期&lt;/p&gt;
                        &lt;/fieldset&gt;
                        &lt;fieldset style="position: relative; z-index: 1"&gt;
                            &lt;legend&gt;双日历框 结束初始日期异常时，rules defaultDate的设置&lt;/legend&gt;
                            &lt;div ms-widget="coupledatepicker" data-coupledatepicker-duplex="from, to2" data-coupledatepicker-rules="eOpts"&gt;&lt;/div&gt;
                            &lt;p&gt;通过配置结束日期初始值异常时的默认值、最小间隔天数、最大间隔天数对应的rules属性，可以使结束日期初始为起始初始日期+2&lt;/p&gt;
                        &lt;/fieldset&gt;
                        &lt;script&gt; 
                            require(["datepicker/avalon.coupledatepicker"], function(avalon) {
                                var model = avalon.define("demo", function(vm) {
                                    vm.from = "2014-06-12"
                                    vm.to = "2014-06-02"
                                    vm.to1 = "2014-06-15"
                                    vm.to2 = "2014-06-dd"
                                    vm.aOpts = {
                                        rules: 'null, 0D'
                                    };
                                    vm.bOpts = {
                                        rules: 'null, 0D, 8D' //逗号分隔的字符分别表示结束初始日期异常时默认显示的日期、起始日期和结束日期之间相隔的最小天数、最大天数
                                    }
                                    vm.cOpts = {
                                        rules: 'null, 0D, 8D',
                                        fromMinDate: '2014-05-02',
                                        fromMaxDate: '2014-06-28',
                                        toMinDate: '2014-06-01',
                                        toMaxDate: '2014-07-12'
                                    }
                                    vm.dOpts = {
                                        rules: 'null, 0D, 8D' 
                                    }
                                    vm.eOpts = {
                                        rules: '2D, 0D, 8D' 
                                    }
                                })
                                avalon.scan();
                            })
                        &lt;/script&gt;
                    &lt;/div&gt;
                &lt;/body&gt;
                &lt;/html&gt;
            </pre>
        </div>
    </div>
</body>
</html>